<script>
import EchartBase from './base/echartBase'

export default {
  extends: EchartBase,
  data() {
    return {
      title: '',
      xAxisData: [],
      yAxisData: [],
      legendData: [],
      isHorizontal: false,
      isMixed: false,
    }
  },
  methods: {
    handleDataSource(obj) {
      if (!obj) return

      this.title = obj.title || ''
      this.xAxisData = obj.xAxisData || []
      this.yAxisData = obj.yAxisData || []
      this.isHorizontal = obj.isHorizontal || false,
      this.isMixed = this.yAxisData.some(item => item.type === 'line')

      this.$nextTick(() => {
        if (this.chart) {
          this.chartOption = this.initChartOption()
          this.chart.setOption(this.chartOption)
        }
      })
    },
    initChartOption() {
      const option = {
        title: this.initTitle(),
        grid: this.initGrid(),
        xAxis: this.isHorizontal ? this.initYAxis() : this.initXAxis(),
        yAxis: this.isHorizontal ? this.initXAxis() : this.initYAxis(),
        tooltip: this.initTooltip(),
        toolbox: this.dataSource.showToolbox ? this.initToolbox() : {},
        series: this.initSeries(),
        legend: {
          type: 'scroll',
          data: this.legendData,
          top: 28
        },
      }
      if (this.dataSource.color && this.dataSource.color.length === this.yAxisData.length) {
        option.color = this.dataSource.color
      }
      return option
    },
    initXAxis() {
      const xAxis = {
        type: 'category',
        axisTick: {
          alignWithLabel: this.dataSource.alignWithLabel !== undefined ? this.dataSource.alignWithLabel : false
        },
        data: this.xAxisData,
        axisPointer: {
          type: 'shadow'
        }
      }
      return xAxis
    },
    initYAxis() {
      if (this.isMixed) {
        var yAxisArr = []
        var tmp = []
        for (let i = 0; i < this.yAxisData.length; i++) {
          const item = this.yAxisData[i]
          
          if (tmp.includes(item.unit)) continue
          tmp.push(item.unit)

          const obj = {
            type: 'value',
          }
          if (item.min !== undefined) { obj.min = item.min }
          if (item.max !== undefined) { obj.max = item.max }
          if (item.interval !== undefined) { obj.interval = item.interval }
          if (item.unit !== undefined) {
            obj.axisLabel = {
              formatter: `{value} ${item.unit}`
            }
          }
          yAxisArr.push(obj)
        }
        return yAxisArr
      }
      const yAxis = {
        type: 'value',
        boundaryGap: [0, 0.01]
      }
      return yAxis
    },
    initSeries() {
      // https://echarts.apache.org/zh/option.html#series-bar
      var series = []
      var tmp = []
      for (let i = 0; i < this.yAxisData.length; i++) {
        const yAxisData = this.yAxisData[i]
        const serie = {
          type: yAxisData.type || 'bar',
          name: yAxisData.name || '',
          showBackground: yAxisData.showBackground || false,
          backgroundStyle: {
            color: yAxisData.backgroundColor || 'rgba(180, 180, 180, 0.2)'
          },
          emphasis: {
            focus: 'series'
          },
          stack: yAxisData.stack || '',
          barWidth: yAxisData.barWidth || '30%',
          data: yAxisData.data,
          animationDuration: this.animationDuration,
        }
        if (serie.type === 'line') {
          serie.showSymbol = yAxisData.showSymbol !== undefined ? yAxisData.showSymbol : true
          serie.lineStyle = {
            width: yAxisData.lineWidth !== undefined ? yAxisData.lineWidth : 1
          }
          serie.areaStyle = yAxisData.areaStyle || null
          serie.smooth = yAxisData.smooth || false
        }
        // 数据堆叠时
        if (serie.stack) {
          serie.label = { show: true }
          serie.emphasis = { focus: 'series' }
        }
        // 图表标线
        if (yAxisData.showMarkLine) {
          serie.markLine = {
            lineStyle: {
              type: 'dashed'
            },
            data: [[{ type: 'min' }, { type: 'max' }]]
          }
        }
        // 本系列特定的 tooltip 设定
        if (yAxisData.unit) {
          serie.tooltip = {
            valueFormatter: function (value) {
              return `${value} ${yAxisData.unit}`
            }
          }
        }
        // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        if (yAxisData.yAxisIndex !== undefined) {
          serie.yAxisIndex = yAxisData.yAxisIndex
        }
        series.push(serie)
        tmp.push(yAxisData.name)
      }
      this.legendData = tmp.length > 1 ? tmp : []
      return series
    }
  }
}
</script>